<template>
  <div class="lyx-event-info">
    <el-row>
      <el-col :span="10">
        <el-form
          ref="form"
          :model="obj"
          label-width="160px"
          style="color: #fff"
        >
          <el-form-item label="日志标题：">
            {{ obj.info.log_title }}
          </el-form-item>

          <el-form-item label="责任人：">
            {{ obj.info.responsibility_person }}
          </el-form-item>

          <el-form-item label="责任人电话：">
            {{ obj.info.responsibility_person_mobile }}
          </el-form-item>

          <el-form-item label="工作类型：">
            {{ obj.info.work_status_name }}
          </el-form-item>

          <el-form-item label="日志类型：">
            {{ obj.info.log_status_name }}
          </el-form-item>

          <el-form-item label="工作对象类型：">
            {{ obj.info.work_obj_status_name }}
          </el-form-item>

          <el-form-item label="工作对象名称：">
            {{ obj.info.work_obj_name }}
          </el-form-item>

          <el-form-item label="工作对象联系电话：">
            {{ obj.info.work_obj_tel }}
          </el-form-item>

          <el-form-item label="日志内容：">
            {{ obj.info.log_info }}
          </el-form-item>

          <el-form-item label="网格员：">
            {{ obj.info.release_name }}
          </el-form-item>

          <el-form-item label="网格员电话：">
            {{ obj.info.mobile }}
          </el-form-item>

          <el-form-item label="经度：">
            {{ obj.info.event_longitude }}
          </el-form-item>

          <el-form-item label="纬度：">
            {{ obj.info.event_latitude }}
          </el-form-item>
        </el-form>
      </el-col>
			<el-col :span="12">
				<el-carousel indicator-position="outside">
					<el-carousel-item v-for="(item,index) in obj.info.question_img.split(',')" :key="index">
						<img :src="item" :title="item" width="100%" height="100%">
					</el-carousel-item>
				</el-carousel>
			</el-col>
      <!--
	<el-col :span="14">
		<el-container style="height: 470px; ">
		<el-main>
		<el-timeline>
			<el-timeline-item
			v-for="(item, index) in obj.flow"
			:key="index"
			:timestamp="item.handle_time"
			placement="top"
			:icon="item.status == '1' ? 'el-icon-check' : undefined "
			type='primary'
			size="large"

			>
			<el-card style="width:400px;" >
				<div>经办人员：{{item.name}}</div>
				<div>处理意见：{{item.content}}</div>
				<div>状态：{{status_label[parseInt(item.status)]}}</div>
				<el-row :gutter="10" class="dlq">
					<el-col :span="8" v-for="(i, index1) in item.imgs" 
					:key="'i' + index1" class="mt10">
						<img 
						:src="'/gridfile/' + i" 
						width="110"  height="160" class="pointer" 
						@click="showImg1(i)">
					</el-col>
						
					<el-col :span="8" v-for="(i, index1) in item.videos" 
					:key="'v' + index1" class="mt10">
						<video-player 
						class="video-player-box"
					         ref="videoPlayer"
					         :options="{
								muted: true,
								language: 'zn',
								playbackRates: [0.7, 1.0, 1.5, 2.0],
								sources: [{
									type: 'video/mp4',
									src: '/gridfile/' + i,
								}],
								width : '110',
								height : '160'
							 }"
					         :playsinline="false"
					         customEventName="customstatechangedeventname"
					    >
						</video-player>

						<div class="zhezhao pointer"
						@click="showImg2(i)"
						> 
						</div>

					</el-col>
				</el-row>
			</el-card>
			</el-timeline-item>
		</el-timeline>
		</el-main>
		</el-container>
	</el-col>
	-->
    </el-row>

    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      title="附件列表"
      width="30%"
    >
      <el-table
        :data="arr"
        size="mini"
        :header-cell-style="{
          'background-color': '#169098',
          color: '#fff',
        }"
      >
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 'img'">图片</span>
            <span v-if="scope.row.type == 'video'">视频</span>
            <span v-if="scope.row.type == 'text'">意见</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showImg(scope.row)"
              style="color: #27cdbf"
            >
              查看
            </el-button>
            &nbsp;&nbsp;
            <a
              class="download"
              :href="'http://grid.tripln.top/gridfile/' + scope.row.value"
              download=""
              title="下载"
              style="color: #27cdbf"
              >下载</a
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
    </el-dialog>

    <el-dialog
      :visible.sync="imgDialogVisible"
      append-to-body
      title="查看图片"
      width="600px"
    >
      <img width="100%" :src="dialogImageUrl" class="mb20" alt="" />
      <el-row class="text-center white mb20">
        <a
          class="download"
          :href="'http://grid.tripln.top' + dialogImageUrl"
          download=""
          title="下载"
          style="color: #27cdbf"
          >下载</a
        >
      </el-row>
    </el-dialog>

    <el-dialog
      :visible.sync="videoDialogVisible"
      append-to-body
      title="查看视频"
      width="600px"
    >
      <video-player
        class="video-player-box"
        ref="videoPlayer"
        :options="{
          muted: true,
          language: 'zn',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [
            {
              type: 'video/mp4',
              src: dialogVideoUrl,
            },
          ],
          width: 560,
        }"
        :playsinline="true"
        customEventName="customstatechangedeventname"
      >
      </video-player>

      <el-row class="text-center white mt20 mb20">
        <a
          class="download"
          :href="'http://grid.tripln.top' + dialogVideoUrl"
          download=""
          title="下载"
          style="color: #27cdbf"
          >下载</a
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "eventInfo",
  data() {
    return {
      dialogVisible: false,
      imgDialogVisible: false,
      videoDialogVisible: false,
      dialogImageUrl: "",
      dialogVideoUrl: "",
      status_label: ["处理中", "完成"],
      is_supervise_label: ["否", "是"],
      current: {},
      arr: [],
    };
  },
  props: {
    obj: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  components: {},

  computed: {
    ...mapGetters([]),
  },

  methods: {
    showImg(item) {
      console.log(item);
      this.dialogImageUrl = "";
      this.dialogVideoUrl = "";
      if (item.type == "img") {
        this.dialogImageUrl = "/gridfile" + item.value;
        this.imgDialogVisible = true;
      } else if (item.type == "video") {
        this.dialogVideoUrl = "/gridfile" + item.value;
        this.videoDialogVisible = true;
      }
    },
    showImg1(item) {
      console.log(item);
      this.dialogImageUrl = "/gridfile" + item;
      this.imgDialogVisible = true;
    },
    showImg2(item) {
      console.log(item);
      this.dialogVideoUrl = "/gridfile" + item;
      this.videoDialogVisible = true;
    },
    download(item) {
      window.location.href = "http://grid.tripln.top/gridfile/" + item.value;
    },
    fujian(item) {
      this.arr = [];
      this.$http({
        fun: "flowInfo",
        id: item.id,
        cb: (res) => {
          if (res.params == undefined) {
            res.params = [];
          } else {
            res.params.forEach((o1) => {
              if (o1.type == "img" && o1.value != null) {
                o1.value.split(",").forEach((o2) => {
                  this.arr.push({
                    type: "img",
                    value: o2,
                  });
                });
              } else if (o1.type == "video" && o1.value != null) {
                this.arr.push(o1);
                // o1.value.split(',').forEach(o2 => {
                // 	this.arr.push({
                // 		type : 'video',
                // 		value : o2,
                // 	});
                // })
              }
            });
          }

          this.current = {
            ...res,
            id: item.id,
          };

          //this.arr = this.current.params;

          console.log(this.current);
          this.dialogVisible = true;
        },
      });
    },
  },

  watch: {},

  mounted() {},
};
</script>

<style scoped>
.vjs_video_3-dimensions {
  /*width: 400px;*/
  /*height: 1920px;*/
}
/*    .lyx-event-info>>> .el-form-item__label{
        font-weight: bold;
    }*/

.zhezhao {
  position: absolute;
  top: 10px;
  width: 110px;
  height: 160px;
  /*background-color: #ee1122;*/
  z-index: 9999;
}
</style>
